<template>
	<view class="list-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="会议须知"></uni-navbar></view>

		<view class="info-box" v-if="id">
			<view class="info-title">
				{{ name }}
				<text class="dept">{{ dept }}</text>
			</view>
		</view>

		<view class="container">
			<view class="rule-box"><view v-html="hyhdMeeting.contentArrange"></view></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			dept: '',
			name: '',
			hyhdMeeting: {
				contentArrange: ''
			}
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.name = decodeURI(option.name);
		this.dept = decodeURI(option.dept);
		this.loadData();
	},
	methods: {
		loadData(id) {
			this.$request('/huiyihuodong/hyhd-meeting/query?id=' + this.id).then((res) => {
				// this.hyhdMeeting.contentArrange = res.data.hyhdMeeting.contentArrange;
				Object.keys(this.hyhdMeeting).forEach((key) => (this.hyhdMeeting[key] = res.data.hyhdMeeting[key]));
			});
		}
	}
};
</script>

<style lang="scss">
.info-box {
	padding: 30rpx 30rpx 100rpx;

	.info-title {
		margin-bottom: 14rpx;
	}
}

.rule-box {
	margin-top: -120rpx;
	margin-bottom: 30rpx;
	padding: 30rpx;
	min-height: 200rpx;
	font-size: 16px;
	line-height: 60rpx;
	border-radius: 30rpx;
	background-color: #fff;

	.overflow {
		overflow-x: auto;
	}

	/deep/ table {
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;
		border: 1px solid #c5d7bb;
	}

	/deep/ table td {
		font-weight: bold;
		border: 1px solid #c5d7bb;
	}

	/deep/ table p {
		margin: 0;
	}

	/deep/ p,
	/deep/ span {
		font-size: 17px !important;
		line-height: 60rpx !important;
		white-space: normal;
	}

	/deep/ p {
		margin-bottom: 60rpx;
	}

	/deep/ img {
		max-width: 100%;
		height: auto;
	}
}
</style>
